<template>
    <div class="ueditor-plus-container">
        <!-- 
            VueUeditorWrap 组件是 vue-ueditor-wrap 库的核心，用于渲染UEditor。
            - v-model="content": 双向数据绑定，将编辑器内容与父组件的 `value` prop 同步。
            - :config="editorConfig": 传入编辑器的配置对象。
            - @ready="onEditorReady": 编辑器初始化完成后的回调事件。
            - editor-id: 编辑器实例的唯一ID，防止同一页面多个编辑器实例冲突。
            - :editorDependencies: 指定UEditor依赖文件的路径，如果放在 /public/static/UEditorPlus/ 目录下，则无需修改。
        -->
        <vue-ueditor-wrap v-model="content" :config="editorConfig" @ready="onEditorReady"
            editor-id="ueditor-plus-editor" style="height: 100%; width: 100%"
            :editorDependencies="['ueditor.config.js', 'ueditor.all.js', 'ueditor.parse.js']"></vue-ueditor-wrap>
    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
    name: 'UEditorPlus',
    components: {
        VueUeditorWrap
    },
    props: {
        // 通过 v-model 传入的编辑器初始内容
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        // 使用 Vite 的环境变量来构建正确的服务器URL，以适配开发和生产环境
        // VITE_APP_BASE_API 应该在 .env.development 和 .env.production 文件中配置
        const serverApiUrl = import.meta.env.VITE_APP_BASE_API || '';
        return {
            // 编辑器内容的内部状态
            content: this.value,
            // 编辑器实例的引用
            editorInstance: null,
            // UEditorPlus 的详细配置项
            editorConfig: {
                // 【重要】服务器统一请求接口路径，必须指向后端重构后的 UEditorController
                serverUrl: `${serverApiUrl}/file/ueditor/controller`,
                // 自动从服务器端加载 `ueditor.config.js`，但我们后端返回的是一个JSON，此选项在这里主要用于触发配置请求
                // 主要配置由 serverUrl?action=config 返回
                loadConfigFromServer: true,
                // 【重要】UEditor 资源文件存放的根路径，必须与项目中静态资源路径一致
                UEDITOR_HOME_URL: '/static/UEditorPlus/',
                // 跨域图片上传时，存放伪后台u.js的路径
                UEDITOR_CORS_URL: '/static/UEditorPlus/',
                // 编辑器层级的 z-index，确保在弹窗等场景下显示正确
                zIndex: 1999,
                // 禁用自动高度，使编辑器高度固定，由CSS控制，能优化滚动条表现
                autoHeightEnabled: false,
                // 编辑器区域的最小高度
                minFrameHeight: 380,
                // 禁用工具栏浮动，使其始终固定在顶部
                autoFloatEnabled: false,
                // 允许编辑器内容区域出现滚动条
                scaleEnabled: true,
            }
        }
    },
    watch: {
        // 监听父组件传入的 value 变化，更新编辑器内容
        value(newVal) {
            if (newVal !== this.content) {
                this.content = newVal
            }
        },
        // 监听编辑器内部 content 的变化，通过 input 事件通知父组件
        content(newVal) {
            this.$emit('input', newVal)
        }
    },
    methods: {
        /**
         * 编辑器准备就绪时的回调函数
         * @param {object} editorInstance - UEditor的实例
         */
        onEditorReady(editorInstance) {
            this.editorInstance = editorInstance
            // 获取CSS变量，用于动态适配明暗主题
            const computedStyle = getComputedStyle(document.documentElement);
            const textColor = computedStyle.getPropertyValue('--text-primary').trim() || '#000000';
            const bgColor = computedStyle.getPropertyValue('--card-bg').trim() || '#ffffff';
            const primaryColor = computedStyle.getPropertyValue('--el-color-primary').trim() || '#409EFF';

            // 监听全屏状态变化事件
            editorInstance.addListener('fullscreenchanged', (type, isFullscreen) => {
                this.$emit('fullscreen-change', isFullscreen);

                // UEditor全屏后会强制设置内联样式，我们需要用JS覆盖它以保证布局正确
                this.$nextTick(() => {
                    const editorUI = editorInstance.ui.getDom();
                    if (isFullscreen) {
                        // 进入全屏，设置正确的 top 和 height，以适应项目顶部导航栏
                        editorUI.style.setProperty('top', '60px', 'important');
                        editorUI.style.setProperty('height', 'calc(100vh - 60px)', 'important');
                    }
                });
            });

            // 创建一个style标签，用于向编辑器的iframe内部注入样式，以适配网站主题
            const style = document.createElement('style');
            style.innerHTML = `
                html {
                    /* 固定根视口，让 body 接管滚动 */
                    height: 100%;
                    overflow: hidden;
                }
                body {
                    /* 适配主题颜色 */
                    color: ${textColor} !important;
                    background-color: ${bgColor} !important;
                    /* 优化长文本的自动换行 */
                    word-wrap: break-word !important;
                    word-break: break-all !important;
                    /* 继承高度并启用垂直滚动 */
                    height: 100% !important;
                    overflow-y: auto !important;
                    /* 为编辑器内容底部添加合适边距，以便最后一行内容也能滚动到视野中央 */
                    padding-bottom: 5px !important;
                    box-sizing: border-box !important;
                }
                /* 适配主题的链接颜色 */
                a {
                    color: ${primaryColor} !important;
                }
                /* 确保内容容器有最小高度，并能自动增长 */
                .edui-body-container {
                    min-height: 350px !important;
                    height: auto !important;
                    overflow-y: auto !important;
                }
            `;
            // 等待编辑器完全准备好后，再注入样式
            editorInstance.ready(() => {
                try {
                    editorInstance.document.head.appendChild(style);
                } catch (e) {
                    console.error('向UEditor的iframe注入样式失败:', e);
                }
            });
        },
    }
}
</script>

<style scoped lang="scss">
/* 容器样式，确保编辑器撑满父容器 */
.ueditor-plus-container {
    /* 修正UEditor默认行高对布局的影响 */
    line-height: initial;
    width: 100%;
    height: 100%;

    /* ---- 使用 :deep() 对UEditor内部UI进行样式覆盖和主题适配 ---- */

    /* 编辑器主容器 */
    :deep(.edui-editor) {
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            border-color: var(--el-color-primary);
        }

        /* 全屏模式下的样式 */
        &.edui-editor-fullscreen {
            z-index: 2001 !important;
            background: var(--card-bg) !important;
            border-radius: 0 !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
        }
    }

    /* 工具栏容器 */
    :deep(.edui-editor-toolbarbox) {
        flex-shrink: 0;
        /* 防止工具栏被压缩 */
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
        background: var(--hover-bg) !important;
        box-shadow: none !important;
        padding: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative;
        z-index: 1;

        .edui-toolbar {
            display: flex !important;
            flex-wrap: wrap !important;
            /* 允许工具换行 */
            gap: 2px !important;
            width: 100% !important;
            justify-content: flex-start !important;
            padding: 0 !important;
        }

        /* 工具栏按钮 */
        .edui-button-body,
        .edui-splitbutton-body,
        .edui-menubutton-body {
            transition: all 0.2s ease;
            border-radius: 4px;
            padding: 2px 4px !important;

            &:hover {
                background-color: var(--el-color-primary-light-9);
                cursor: pointer;
            }
        }

        /* 按钮图标 */
        .edui-default .edui-icon {
            color: var(--text-secondary);
            transition: color 0.2s ease;
            font-size: 16px !important;

            &:hover {
                color: var(--el-color-primary);
            }
        }

        /* 激活状态的按钮 */
        .edui-button.edui-active .edui-button-body,
        .edui-splitbutton.edui-active .edui-splitbutton-body,
        .edui-menubutton.edui-active .edui-menubutton-body {
            background-color: var(--el-color-primary-light-8) !important;
            border: 1px solid var(--el-color-primary-light-7) !important;

            .edui-icon {
                color: var(--el-color-primary) !important;
            }
        }

        /* 分隔符 */
        .edui-toolbar .edui-separator {
            width: 1px !important;
            height: 16px;
            margin: 4px 6px !important;
            background-color: var(--border-color);
        }
    }

    /* 编辑区域的iframe容器 */
    :deep(.edui-editor-iframeholder) {
        flex-grow: 1;
        /* 占据剩余所有空间 */
        min-height: 0;
        /* 强制覆盖 UEditor 的内联高度，让 flexbox 生效 */
        height: auto !important;
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        background-color: var(--card-bg) !important;
        width: 100% !important;
        box-sizing: border-box;
        position: relative;
        z-index: 0;

        iframe,
        textarea {
            width: 100% !important;
            height: 100% !important;
            min-height: 380px;
            box-sizing: border-box !important;
            border: none !important;
            outline: none !important;
            display: block;
        }

        /* 源码编辑模式下的textarea样式 */
        textarea {
            overflow-y: auto !important;
            background-color: #272822 !important;
            /* 类VSCode暗色主题 */
            color: #f8f8f2 !important;
            font-family: 'Courier New', Courier, monospace !important;
            font-size: 14px !important;
            line-height: 1.6 !important;
            padding: 15px !important;
            resize: none !important;
        }
    }

    /* 编辑器底部状态栏 */
    :deep(.edui-editor-bottom) {
        flex-shrink: 0;
        background: var(--hover-bg);
        border-top: 1px solid var(--border-color);
        padding: 4px 10px;
        color: var(--text-secondary);
        font-size: 12px;

        /* 字数统计换行问题 */
        .edui-wordcount {
            white-space: normal !important;
            word-break: break-all !important;
        }
    }

    /* 弹出菜单/下拉框样式 */
    :deep(.edui-popup) {
        border-radius: 6px !important;
        overflow: hidden !important;
        box-shadow: var(--el-box-shadow-light) !important;
        border: 1px solid var(--border-color) !important;
        background-color: var(--card-bg) !important;
        z-index: 2002 !important;

        .edui-popup-content,
        .edui-menu-body,
        .edui-list-body {
            background-color: transparent !important;
            color: var(--text-primary) !important;
        }

        .edui-menu-item-split {
            background-color: var(--border-color) !important;
            margin: 4px 0 !important;
        }

        .edui-list-item,
        .edui-menu-item {
            color: var(--text-primary) !important;
            padding: 6px 12px !important;
            transition: background-color 0.2s ease, color 0.2s ease;

            &.edui-selected,
            &:hover {
                background-color: var(--hover-bg) !important;
                color: var(--el-color-primary) !important;
            }
        }
    }
}

/* 响应式优化：在较小屏幕上调整工具栏间距 */
@media screen and (max-width: 992px) {
    :deep(.edui-editor-toolbarbox) {
        padding: 3px 2px !important;

        .edui-button-body,
        .edui-splitbutton-body,
        .edui-menubutton-body {
            padding: 0 2px !important;
        }

        .edui-toolbar .edui-separator {
            margin: 1px 2px !important;
        }
    }
}
</style>